<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>Hello World</title>
  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>

<body>
  <div id="root"></div>
  <script type="text/babel">

    function BoilingVerdict(props){
      if(props.celsius >= 100){
        return <p>The water would boil.</p>;
      }

      return <p>The water would not boil.</p>;
    }

    const scaleNames = {
      c:'Celsius',
      f:'Fahrenheit'
    };

    function toCelsius(fahrenheit){
      return (fahrenheit - 32) * 5 / 9;
    }

    function toFahrenheit(celsius){
      return (celsius * 9 / 5) + 32;
    }

    function tryConvert(temperature,convert){
      const input = parseFloat(temperature);
      if(Number.isNaN(input)){
        return '';
      }

      const output = convert(input);
      const rounded = Math.round(output * 1000) / 1000;
      return rounded.toString();
    }

    class TemperatureInput extends React.Component{
      constructor(props){
        super(props);
        this.handleChange = this.handleChange.bind(this);
      }

      handleChange(e){
        this.props.onTemperatureChange(e.target.value);
      }

      render(){
        const temperature = this.props.temperature;
        const scale = this.props.scale;
        return (
          <fieldset>
            <legend>Enter temperature in {scaleNames[scale]}:</legend>
            <input value={temperature} onChange={this.handleChange}/>
          </fieldset>
        );
      }
    }

    class Calculator extends React.Component{
      constructor(props){
        super(props);
        this.handleCelsiusChange = this.handleCelsiusChange.bind(this);
        this.handleFahrenheitChange = this.handleFahrenheitChange.bind(this);
        this.state = {temperature : '',scale:'c'};
      }

      // {scale:'c',temperature} 会设置同名的temperature参数？
      handleCelsiusChange(temperature){
        this.setState({scale:'c',temperature});
      }

      handleFahrenheitChange(temperature){
        this.setState({scale:'f',temperature});
      }

      render(){
        const scale = this.state.scale;
        const temperature = this.state.temperature;
        const celsius = scale === 'f' ? tryConvert(temperature,toCelsius) : temperature;
        const fahrenheit = scale === 'c' ? tryConvert(temperature,toFahrenheit) : temperature;

        return (
          <div>
            <TemperatureInput scale="c" temperature={celsius} onTemperatureChange={this.handleCelsiusChange}/>
            <TemperatureInput scale="f" temperature={fahrenheit} onTemperatureChange={this.handleFahrenheitChange}/>
            <BoilingVerdict celsius={parseFloat(celsius)}/>
          </div>
        );
      }
    }

    ReactDOM.render(<Calculator/>,document.getElementById('root'));
  </script>
  <!--
      Note: this page is a great way to try React but it's not suitable for production.
      It slowly compiles JSX with Babel in the browser and uses a large development build of React.

      To set up a production-ready React build environment, follow these instructions:
      * https://reactjs.org/docs/add-react-to-a-new-app.html
      * https://reactjs.org/docs/add-react-to-an-existing-app.html

      You can also use React without JSX, in which case you can remove Babel:
      * https://reactjs.org/docs/react-without-jsx.html
      * https://reactjs.org/docs/cdn-links.html
    -->
</body>

</html>